<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Widget :: Suggestions 1.0</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.8.0/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../FilterJson/plugin/jquery-filter-json-plugin.js"></script>
		<script type="text/javascript" src="../PaginatedDropDown/widget/paginated-drop-down-widget.js"></script>
		<script type="text/javascript" src="widget/suggestions-widget-1.0.js"></script>
		<link rel="stylesheet" type="text/css" href="style/suggestions-widget-style-1.0.css" />
		<style type="text/css">
			.marginTB5px {
				margin: 5px 0px;
			}
			.marginL20px {
				margin-left: 500px;
			}
			.x-inline-block {
				display: inline-block;
				zoom: 1;
				*display: inline;
				 _height: 30px;
			}
			.width400px {
				width: 400px;
			}
			.height30px {
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="marginTB5px x-inline-block">
			<div id="x-demo-1" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
			<br/>
			<div id="x-demo-2" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
			<br/>
			<div id="x-demo-3" class="x-suggestions width400px height30px" contentEditable="true" dir="LTR"></div>
		</div>
	</body>
	<script type="text/javascript">
		$( document ).ready(function() {
			$( '#x-demo-1' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>"
			}).bind( "suggestionsitemselected", function( event, data ) {
				if(window.console) {
					console.log("callback - suggestionsitemselected");
					console.log(event);
					console.log(data);
				}
		    });

			$( '#x-demo-2' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				filterJson: {},
				customEventPrefix: "sdd"
			}).bind( "sdditemselected", function( event, data ) {
				if(window.console) {
					console.log("callback - sdditemselected");
					console.log(event);
					console.log(data);
				}
		    });

			$( '#x-demo-3' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div></div>",
				filterJson: {startsWith: true},
				customEventPrefix: "sdd3"
			}).bind( "sdd3itemselected", function( event, data ) {
				if(window.console) {
					console.log("callback - sdd3itemselected");
					console.log(event);
					console.log(data);
				}
		    });
		});
	</script>
</html>
